<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>入门</title>
</head>
<body>

<div id="app">
    <my-component></my-component>

    <local-component></local-component>

    <qiantao-component></qiantao-component>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     * 所谓的组件，其实就是自定义的标签（这个和xml中自定义标签非常相似）
     * **/


    //推荐自定义的组件使用小写加减号分割的形式进行命名

    //全局注册，可以在任何Vue的实例下使用
    Vue.component(
        'my-component',{
            template:"<div>这里是全局注册的组件！</div>"  //注意template的DOM结构必须被一个元素包含！不带类似的<div></div>标签是无法渲染的！
        }
    );

    var child = {
        template:"<div>这里是嵌套的局部注册组件！</div>"
    };

    var app = new Vue({
        el:"#app",
        components:{
            'local-component':{
                template:"<div>这里是局部注册的组件！</div>"  //该组件只能在app这个Vue实例下进行使用
            },
            'qiantao-component':child,
        }
    })
</script>
</body>
</html>
